<template>
  <Navbar :title="'首页'"></Navbar>
  <div class="main-wrap">
    <div class="swiper">
      <van-swipe :autoplay="3000" lazy-render indicator-color="#eb1f69">
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="select-card" v-for="item in lists" :key="item.id">
      <div class="index-left" @click="togoPage(item.id)">
        <div class="image">
          <img :src="item.image" alt="" />
        </div>
        <div class="text">
          <span class="title">{{ item.title }}</span>
          <span class="detail">{{ item.detail }}</span>
        </div>
      </div>
      <div class="index-right">
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="bottom-card">
      <div class="left">
        <div class="left-top">
          <span class="title">甜蜜俱乐部</span>
          <img class="king" src="../assets/image/king.png" alt="" />
        </div>
        <div class="left-bottom">
          <span>甜蜜俱乐部是针对蜜雪冰城的忠实粉丝推出的会员服务</span>
        </div>
      </div>
      <div class="right">
        <img src="../assets/image/bottom_right.png" alt="" />
      </div>
    </div>
  </div>
  <Tabbar></Tabbar>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import Tabbar from "../components/Tabbar.vue";
import Navbar from "../components/Navbar.vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const state = reactive({
      images: [
        require("../assets/image/swiper1.jpg"),
        require("../assets/image/swiper2.jpg"),
        require("../assets/image/swiper3.jpg"),
      ],
      lists: [
        {
          id: 1,
          image: require("../assets/image/takeaway_menu.png"),
          title: "手机点餐",
          detail: "无需排队，快速下单",
        },
        {
          id: 2,
          image: require("../assets/image/exchange.png"),
          title: "兑换码",
          detail: "输入兑换码，兑换优惠券",
        },
        {
          id: 3,
          image: require("../assets/image/discounts.png"),
          title: "优惠券",
          detail: "下单优惠，纵享甜蜜",
        },
      ],
    });
    const togoPage = (e) => {
      // console.log(e);
      if (e == 1) {
        router.push("/order");
      } else if (e == 2) {
        router.push("/cdkey");
      } else {
        router.push("/coupon");
      }
    };
    return {
      ...toRefs(state),
      togoPage,
    };
  },
  components: {
    Tabbar,
    Navbar,
  },
};
</script> 

<style lang="less" scoped>
.main-wrap {
  margin: 48px 0;
  .swiper {
    width: 100%;
    height: 200px;
    img {
      width: 100%;
      height: 200px;
    }
  }
  .select-card {
    margin: 10px 10px;
    border-bottom: 1px solid rgb(244, 244, 244);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .index-left {
      display: flex;
      .image {
        margin-right: 16px;
      }
      .text {
        .title {
          display: block;
          font-size: 20px;
          font-weight: bold;
          margin-top: 4px;
        }
        .detail {
          display: block;
          font-size: 14px;
          color: #999;
        }
      }
    }
  }
  .bottom-card {
    margin: 0 10px;
    display: flex;
    background-color: #fde9ea;
    border-radius: 5px;
    .left {
      width: 170px;
      .left-top {
        margin-left: 10px;
        height: 32px;
        display: flex;
        margin: 10px;
        .title {
          display: block;
          font-size: 18px;
          height: 32px;
          line-height: 40px;
          font-weight: 800;
        }
        .king {
          width: 32px;
          height: 32px;
          margin-left: 10px;
        }
      }
      .left-bottom {
        margin-left: 10px;
        font-size: 10px;
      }
    }
    .right {
      display: inline-block;
      align-items: center;
    }
  }
}
</style>
<style scoped>
.van-badge__wrapper {
  font-size: 28px;
  color: #999;
  opacity: 0.5;
}
</style>